{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div>
            <input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        </div>

     <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                订单列表
            </div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>订单号</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>状态</th>
                        <th>管理员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.title }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>{{ obj.admin.username }}</td>
                        <td>
                            <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑"/>
                            <input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除"/>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>

    <!-- 新建/编辑（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModelLabel">
					新建订单
				</h4>
			</div>
			<div class="modal-body">
                <form  id="formAdd">
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative;margin-bottom: 15px">
                                    <label>{{ field.label }}</label>
                                    {{field}}
                                    <span style="color: red;position: absolute"></span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button id="btnSave" type="button" class="btn btn-primary">
					保存
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

    <!--删除对话框-->
{#    <div class="model fade" id="deleteModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">#}
{#        <div class="model-dialog" >#}
{#            <div class="alert alert-danger alert-dismissable fade in" role="alert">#}
{#                <h4>是否确定删除？</h4>#}
{#                <p style="margin: 10px 0">删除后，所有关联的相关数据都会被删除</p>#}
{#                <p style="text-align: right">#}
{#                    <button id="btnConfirmDele" class="btn btn-danger" type="button">确定</button>#}
{#                    <button class="btn btn-default" type="button" data-dismiss="model">取消</button>#}
{#                </p>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
    <div class="modal fade" id="deleteModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="test">
					删除订单
				</h4>
			</div>
                <div class="alert alert-danger alert-dismissable fade in" role="alert">
                    <h4>是否确定删除？</h4>
                    <p style="margin: 10px 0">删除后，所有关联的相关数据都会被删除</p>
                    <p style="text-align: right">
                        <button id="btnConfirmDele" class="btn btn-danger" type="button">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </p>
                </div>
{#			<div class="modal-footer">#}
{#				<button type="button" class="btn btn-default" data-dismiss="modal">关闭#}
{#				</button>#}
{#				<button id="btnSave" type="button" class="btn btn-primary">#}
{#					保存#}
{#				</button>#}
{#			</div>#}
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        var DELETE_ID;
        var EDIT_ID;
        $(function () {
            bindBtnAddEvent()
            bindBtnSaveEvent()
            bindBtnDeleteEvent()
            bindBtnConfirmDeleteEvent()
            bindBtnEditEvent()

        })
        function bindBtnAddEvent(){
            $("#btnAdd").click(function (){
                // 将正在编辑id设置为空
                EDIT_ID = undefined
                $("#myModelLabel").text("新建")
                // 点击新建按钮 显示对话框
                $("#myModel").modal('show')
                // 清空对话框的数据
                $("#formAdd")[0].reset()
            })
        }
        function bindBtnSaveEvent(){
            $("#btnSave").click(function (){
                $(".error-msg").empty()
                // 点击新建按钮 显示对话框
                if(EDIT_ID){
                    // 编辑
                    doEdit()
                }else{
                    // 添加
                    doAdd()
                }
                //alert("保存")

            })
        }
        function doEdit() {
              $.ajax({
                    url:"/app/order/edit/"+"?uid="+EDIT_ID,  // order/edit/?uid=12
                    type:"post",
                    data:$("#formAdd").serialize(),
                    dataType:"JSON",
                    success:function (res) {
                        console.log(res)
                        if(res.status){
                            //alert("创建成功")
                            // 清空表单
                            $('#formAdd')[0].reset();
                            // 关门模态框
                            $('#myModal').modal('hide');

                            // 刷新页面
                            location.reload()

                        }else{
                            // 把错误信息显示对话框中
                            $.each(res.error,function (name,errorList) {
                                $("#id_"+name).next().text(errorList[0])

                            })
                        }

                    }
                })


        }

        function doAdd() {
              $.ajax({
                    url:"/app/order/add/",
                    type:"post",
                    data:$("#formAdd").serialize(),
                    dataType:"JSON",
                    success:function (res) {
                        console.log(res)
                        if(res.status){
                            //alert("创建成功")
                            // 清空表单
                            $('#formAdd')[0].reset();
                            // 关门模态框
                            $('#myModal').modal('hide');

                            // 刷新页面
                            location.reload()

                        }else{
                            // 把错误信息显示对话框中
                            $.each(res.error,function (name,errorList) {
                                $("#id_"+name).next().text(errorList[0])

                            })
                        }

                    }
                })


        }
        function bindBtnDeleteEvent() {
            $('.btn-delete').click(function () {
                $("#deleteModel").modal('show')
                // 获取当前行id 并赋值给全局变量
                DELETE_ID = $(this).attr("uid");
                
            })
            
        }

        function bindBtnConfirmDeleteEvent() {
            $("#btnConfirmDele").click(function () {
                // 点击确认删除按钮，将全局变量中设置要删除id发送到后台
                $.ajax({
                    url: "/app/order/delete/", // /app/order/delete/?uid=123
                    type: "GET",
                    data: {
                        uid:DELETE_ID
                    },
                    dataType: "JSON",
                    success:function (res) {
                        if(res.status){
                            //alert("删除成功")
                            location.reload()
                        }else{
                            alert("删除失败")
                        }
                        
                    }
                    
                })

            })

        }

        function bindBtnEditEvent() {
            $(".btn-edit").click(function () {
                // 清空对话框的数据
                $("#formAdd")[0].reset()
                //alert("点击编辑")
                var uid = $(this).attr("uid")
                EDIT_ID = uid;

                // 发送ajax去后端获取当前行的相关数据
                $.ajax({
                    url: "/app/order/detail/",
                    type: "get",
                    data: {
                        uid: uid,
                    },
                    dataType: "JSON",
                    success:function (res) {
                        console.log(res.data)
                        if(res.status){
                            // 将数据赋值到对话框
                            $.each(res.data.data,function (name,value) {
                                $("#id_"+name).val(value)

                            })
                            //修改对话框的标题
                            $("#myModelLabel").text("编辑")

                            // 点击编辑 显示对话框
                            $("#myModal").modal('show')

                        }else{
                            alert(res.error)
                        }
                    }

                })

            })
        }

    </script>
{% endblock %}